<template>
  <div class="top">
    <div class="wrapper">
      <div class="left">
        <i class="el-icon-location-outline"></i><span>北京</span>
        <template v-if="user_status">
          <nuxt-link to="/login">立即登录</nuxt-link>
          <nuxt-link to="/login">注册</nuxt-link>
        </template>

        <template v-else>
          <nuxt-link to="/center">fovegage</nuxt-link>
          <nuxt-link to="/logout">退出</nuxt-link>
        </template>
      </div>

      <div class="right">
        <ul>
          <li>
            <nuxt-link to="/order">我的订单</nuxt-link>
          </li>

          <li class="list">
            <nuxt-link to="/center/member">账户中心</nuxt-link>
            <!--            <dl>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">个人资料</nuxt-link>-->
            <!--              </dt>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">收货地址</nuxt-link>-->
            <!--              </dt>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">售后管理</nuxt-link>-->
            <!--              </dt>-->
            <!--            </dl>-->
          </li>

          <li class="list">
            <nuxt-link to="/center/member">会员中心</nuxt-link>
            <!--            <dl>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">优惠券</nuxt-link>-->
            <!--              </dt>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">我的搜藏</nuxt-link>-->
            <!--              </dt>-->
            <!--              <dt>-->
            <!--                <nuxt-link to="/center/member">我的足迹</nuxt-link>-->
            <!--              </dt>-->

            <!--            </dl>-->
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      user_status: true
    }
  }
}
</script>

<style scoped lang="scss">
.top {
  background-color: #F8F8F8;
  color: #999;
  height: 35px;
  line-height: 35px;
  z-index: 999;

  a {
    color: #999;
  }

  .wrapper {
    margin-right: auto;
    margin-left: auto;
    //margin: 0 auto;
    width: 1200px;

    a:hover {
      color: #31bbAC;
    }

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left {
      a, span {
        margin-right: 10px;
      }


    }

    .right {
      ul {

        display: flex;
        flex-direction: row;
        li {

          margin-right: 15px;
        }
      }
    }

    //.right {
    //  //https://blog.csdn.net/weixin_34379433/article/details/89769408 解决li反转问题
    //  ul {
    //    //float: right;
    //    height: 40px;
    //    display: flex;
    //    flex-direction: row;
    //    a:hover {
    //      color: #31bbAC;
    //    }
    //
    //    li {
    //
    //
    //      //inline-block 和 block   inline-block横着  block竖着
    //      //float: left;
    //      //display: block;
    //      display: inline-block;
    //      margin-right: 15px;
    //      cursor: pointer;
    //      padding-right: 10px;
    //      padding-left: 10px;
    //      box-sizing: border-box;
    //
    //
    //      &.list:hover {
    //        border: 1px solid #e5e5e5;
    //        border-top: none;
    //        background-color: #ffffff;
    //
    //
    //        dl {
    //          display: block;
    //
    //
    //        }
    //      }
    //
    //      dl {
    //        display: none;
    //        background-color: #ffffff;
    //        z-index: 999;
    //
    //        dd {
    //          line-height: 35px;
    //        }
    //      }
    //    }
    //  }
    //
    //}
  }
}
</style>
